<template>
  <div id="wangeditor">
    <div ref="editorElem" style="text-align:left;height: auto;"></div>
  </div>
</template>
<script>
  import {
    Loading
  } from 'element-ui';
  import E from "wangeditor";
  export default {
    name: "Editor",
    data() {
      return {
        editor: null,
        editorContent: '',
        loading: null,
      }
    },
    // catchData是一个类似回调函数，来自父组件，当然也可以自己写一个函数，主要是用来获取富文本编辑器中的html内容用来传递给服务端
    props: ['catchData', 'text'],
    mounted() {
      this.init();
    },
    /* watch: {
      text(val, newval) {
        console.log(val,);
        if(val == newval){

        }else{
          this.setText(newval);
        }

      }
    }, */
    methods: {
      init() {
        this.editor = new E(this.$refs.editorElem);
        // 编辑器的事件，每次改变会获取其html内容
        this.editor.config.onchange = html => {
          this.editorContent = html;
          this.catchData(this.editorContent);
        };
        this.editor.config.uploadFileName = 'image';
        this.editor.config.uploadImgHeaders = {
          Authorization: 'Bearer ' + localStorage.getItem('token')
        }
        this.editor.config.uploadImgServer = '/wsj/' + this.$api.imageUpload;
        this.editor.config.showLinkImg = false;
        this.editor.config.uploadImgTimeout = 30000000;
        this.editor.config.uploadImgHooks = {
          before: function(xhr, editor, files) {
            this.loading = Loading.service({
              lock: true,
              text: '图片上传中',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });
          },
          success: function(xhr, editor, result) {
            this.loading.close();
          },
          fail: function(xhr, editor, result) {
            this.loading.close();
          },
          error: function(xhr, editor) {
            this.loading.close();
          },
          timeout: function(xhr, editor) {
            this.loading.close();
          },
          customInsert: function(insertImg, result, editor) {
            var url = result.data;
            insertImg(url);
            this.loading.close();
          }
        }
        this.editor.config.menus = [
          // 菜单配置
          'head', // 标题
          'bold', // 粗体
          'fontSize', // 字号
          'fontName', // 字体
          'italic', // 斜体
          'underline', // 下划线
          'strikeThrough', // 删除线
          'foreColor', // 文字颜色
          'backColor', // 背景颜色
          'link', // 插入链接
          'list', // 列表
          'justify', // 对齐方式
          'quote', // 引用
          'emoticon', // 表情
          'image', // 插入图片
          'table', // 表格
          'code', // 插入代码
        ];
        this.editor.create(); // 创建富文本实例
        this.editor.txt.html(this.text);
      },
      setText(content) {
        this.editor.txt.html(content);
      },
      clearText() {
        this.editor.txt.clear();
      }
    }
  }
</script>
<style scoped>
	>>>.w-e-text img{
		display: flex;
	}
</style>
